<mat-toolbar color="primary">
    <span>Devfile Builder</span>
    <span class="spacer"></span>
    <span class="topright"><a href="https://odo.dev/docs/user-guides/advanced/using-gui/" target="_blank" class="toplink">Work in progress</a></span>
    <button style="top: -8px" data-cy="yaml-send" matTooltip="Save Devfile to disk" mat-flat-button color="warn" disabled="{{!(state.modified|async)}}" (click)="onSave(input.value)">Save</button>
</mat-toolbar>
<main>

    <div class="flex-container">

        <div class="flex-child">
            <mat-tab-group animationDuration="0" (selectedTabChange)="onSelectedTabChange($event)">

                <mat-tab data-cy="tab-yaml" label="{{tabNames[0]}}">
                    <div class="tab-content">
                        <mat-form-field appearance="outline" class="full-width">
                            <mat-label>Devfile YAML</mat-label>
                            <textarea data-cy="yaml-input" matInput #input id="input" rows="20" [value]="devfileYaml"></textarea>
                        </mat-form-field>
                        <button data-cy="yaml-save" matTooltip="Apply changes to other tabs" mat-flat-button color="primary" (click)="onApply(input.value)">Apply</button>
                        <button data-cy="yaml-clear" matTooltip="Clear Devfile content" mat-flat-button color="normal" (click)="clear()">Clear</button>
                    </div>
                </mat-tab>

                <mat-tab data-cy="tab-chart" label="{{tabNames[1]}}">
                    <div class="flex-child">
                        <div #mermaid id="mermaid" class="mermaid" [innerHTML]="sanitizer.bypassSecurityTrustHtml(mermaidContent)"></div>
                    </div>            
                </mat-tab>

                <mat-tab data-cy="tab-metadata">
                    <ng-template mat-tab-label>
                        {{tabNames[2]}}
                    </ng-template>
                    <app-metadata></app-metadata>
                </mat-tab>

                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">code</mat-icon>
                        {{tabNames[3]}}
                    </ng-template>
                    <app-commands></app-commands>
                </mat-tab>

                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">alarm</mat-icon>
                        {{tabNames[4]}}
                    </ng-template>
                    <app-events></app-events>
                </mat-tab>

                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">width_normal</mat-icon>
                        {{tabNames[5]}}
                    </ng-template>
                    <app-containers></app-containers>
                </mat-tab>

                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">image</mat-icon>
                        {{tabNames[6]}}
                    </ng-template>
                    <app-images></app-images>
                </mat-tab>

                <mat-tab >
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">description</mat-icon>
                        {{tabNames[7]}}
                    </ng-template>
                    <app-resources></app-resources>
                </mat-tab>

                <mat-tab>
                    <ng-template mat-tab-label>
                        <mat-icon class="tab-icon material-icons-outlined">storage</mat-icon>
                        {{tabNames[8]}}
                    </ng-template>
                    <app-volumes></app-volumes>
                </mat-tab>

            </mat-tab-group>
        </div>      

    </div>
</main>
